<!--
 * @Author: Ming shi gang
 * @Date: 2019-09-10 19:28:53
 * @LastEditors: Ming shi gang
 * @LastEditTime: 2019-09-13 21:49:09
 -->
<template>
  <div class="team">
    <div class="team_top">
      <div class="team_nav">
        <div class="go_back" @click="go_back"></div>
        <div class="team_name"></div>
        <div class="team_search" @click="toSearch"></div>
      </div>
      <!-- <div class="team_menu">
        <div class="menu_num"></div>
        <div class="menu_invite"></div>
      </div>-->
      <div class="team_group">
        <div :class="[type === 1 ? 'active': '','group']" @click="changeType(1)">
          直接粉丝
          <br />
          ({{team_sum}}人)
          <div class="group_line"></div>
        </div>
        <div :class="[type === 2 ? 'active': '','group']" @click="changeType(2)">
          间接粉丝
          <br />
          ({{indirect_team_sum}}人)
          <div class="group_line"></div>
        </div>
      </div>
      <div class="team_info">
        <div class="info_menu">
          <div :class="[sort_type === 1 ? 'on': '','info_join']" @click="options(1)">
            <span>加入时间</span>
            <div class="icons">
              <span :class="[time_ === 2 ? 'active': '','up']"></span>
              <span :class="[time_ === 1? 'active': '','down']"></span>
            </div>
          </div>
          <div :class="[sort_type === 2 ? 'on': '','info_join']" @click="options(2)">
            粉丝人数
            <span class="icons">
              <span :class="[fans_n === 2 ? 'active': '','up']"></span>
              <span :class="[fans_n=== 1 ? 'active': '','down']"></span>
            </span>
          </div>
          <div :class="[sort_type === 3 ? 'on': '','info_join']" @click="options(3)">
            粉丝积分
            <span class="icons">
              <span :class="[fans_i === 2? 'active': '','up']"></span>
              <span :class="[fans_i === 1? 'active': '','down']"></span>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="team_member" id="team-list">
      <ul>
        <li class="li" @click="open(index)" v-for="(item,index) in teamList" :key="index">
          <div class="member-left">
            <div class="member_img">
              <img v-if="item.head_pic" :src="item.head_pic" />
              <img v-else src="/static/picture/head_img.png" />
            </div>
            <div class="member_info">
              <div class="member_name">{{item.nickname}}</div>
              <div class="member_time">{{item.create_time}}</div>
            </div>
          </div>
          <div class="team_content">
            邀请{{item.child_num}}人
            <span class="team_content_go"></span>
          </div>
        </li>
      </ul>
      <div class="bottom" v-if="teamList.length>0&&!isGetMore">没有更多数据</div>
    </div>
    <div class="no-fans" v-if="teamList.length===0&&!isGetMore">
      <img src="/static/picture/no_fans.png" />
      <div>目前暂无粉丝</div>
    </div>
    <div class="team_exp">邀请人:{{parent_name}}</div>
    <div class="container" v-if="container" @click="close"></div>
    <div class="container_info" v-if="container">
      <div class="info_img">
        <img v-if="detail.head_pic" :src="detail.head_pic" />
        <img v-else src="/static/picture/head_img.png" />
      </div>
      <div class="info_name">
        <span>{{detail.nickname}}</span>
        <img v-if="+detail.level===1" src="/static/picture/one.png" />
        <img v-if="+detail.level===2" src="/static/picture/two.png" />
        <img v-if="+detail.level===3" src="/static/picture/three.png" />
        <img v-if="+detail.level===4" src="/static/picture/four.png" />
      </div>
      <div class="info_invite">
        邀请码：
        <span id="cp_code">{{detail.spread_code}}</span>
        <span data-clipboard-target="#cp_code" @click="doCopy" class="info_copy under_copy">复制</span>
      </div>
      <div class="info_sum">
        <div class="sum_wait">
          <div class="num">{{detail.integral}}</div>
          <div class="wait">累计积分</div>
        </div>
        <div class="sum_add">
          <div class="num">{{detail.total_earn}}</div>
          <div class="add">累计金额</div>
        </div>
      </div>
      <div class="info_close" @click="close">关闭</div>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import Clipboard from "clipboard";
export default {
  name: "Team",
  data() {
    return {
      team_sum: "", //直接粉丝
      indirect_team_sum: "", //间接粉丝
      parent_name: "", //邀请人
      container: false,
      time_: 1,
      fans_n: -1,
      fans_i: -1,
      sort_type: 1,
      sort_value: 1,
      type: 1,
      limit: 10,
      page: 1,
      teamList: [],
      token: "",
      isSending: false, // 是否正在加载
      isGetMore: true, // 是否还有更多
      detail: {
        level: "",
        nickname: "",
        spread_code: "",
        integral: "",
        total_earn: "",
        head_pic: ""
      }
    };
  },
  created() {
    document.title = "我的粉丝";
    if (localStorage.token) {
      this.token = localStorage.getItem("token");
    }
  },
  mounted() {
    this.getDetail();
    this.getTeamList();
    document.body.addEventListener("touchmove", () => {
      let element = $("#team-list");
      if (!element[0]) {
        return;
      }
      let win = $(window);
      if (
        element.offset().top + element.height() <=
        win.height() + win.scrollTop()
      ) {
        this.getTeamList();
      }
    });
  },
  methods: {
    toSearch() {
      this.$router.push({ path: "/searchMember" });
    },
    doCopy() {
      let clipboard = new Clipboard(".under_copy");
      clipboard.on("success", e => {
        Toast("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        Toast("复制失败");
        clipboard.destroy();
      });

      //    else {
      //     Toast("请先登录");
      //     this.$router.push({ path: "/center" });
      //   }
    },
    changeType(index) {
      this.type = index;
      this.isSending = false;
      this.isGetMore = true;
      this.page = 1;
      this.teamList = [];
      this.getTeamList();
    },
    //返回
    go_back() {
      this.$router.go(-1);
    },
    close() {
      this.container = false;
    },
    open(index) {
      this.container = true;
      this.detail.level = +this.teamList[index].level;
      this.detail.nickname = this.teamList[index].nickname;
      this.detail.spread_code = this.teamList[index].spread_code;
      this.detail.integral = this.teamList[index].integral;
      this.detail.total_earn = this.teamList[index].total_earn;
      this.detail.head_pic = this.teamList[index].head_pic;
    },
    options(e) {
      this.sort_type = e;
      if (e == 1) {
        this.time_ = this.time_ === -1 ? 1 : this.time_ === 1 ? 2 : 1;
        this.fans_n = -1;
        this.fans_i = -1;
        this.sort_value = this.time_;
      } else if (e == 2) {
        this.fans_n = this.fans_n === -1 ? 1 : this.fans_n === 1 ? 2 : 1;
        this.time_ = -1;
        this.fans_i = -1;
        this.sort_value = this.fans_n;
      } else {
        this.fans_i = this.fans_i === -1 ? 1 : this.fans_i === 1 ? 2 : 1;
        this.fans_n = -1;
        this.time_ = -1;
        this.sort_value = this.fans_i;
      }
      this.isSending = false;
      this.isGetMore = true;
      this.page = 1;
      this.teamList = [];
      this.getTeamList();
    },
    //粉丝列表
    getTeamList() {
      var that = this;
      if (this.isSending || !this.isGetMore) {
        return;
      }
      this.isSending = true;
      Indicator.open();
      this.$axios
        .get("/v1/user/getTeamList", {
          params: {
            sort_type: this.sort_type,
            sort_value: this.sort_value,
            type: this.type,
            page: this.page,
            limit: this.limit
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
            Authorization: "bearer " + this.token
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            Indicator.close();
            this.page++;
            that.teamList = that.teamList.concat(res.data.data);
            if (res.data.data.length < this.limit) {
              this.isGetMore = false;
            }
            this.isSending = false;
          } else {
            Toast(res.data.msg);
          }
        });
    },
    getDetail() {
      this.$axios({
        url: "/v1/user/getUserInfo",
        method: "post",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
          Authorization: "bearer " + this.token
        }
      }).then(respanse => {
        var res = respanse.data.data;
        if (respanse.data.code == 200) {
          this.parent_name = res.parent_name;
          this.indirect_team_sum = res.indirect_team_sum;
          this.team_sum = res.team_sum;
        } else if (respanse.data.code == 10000) {
          this.$router.push({ path: "/login" });
        } else {
          Toast(respanse.data.msg);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.team {
  padding-top: 400px;
  box-sizing: border-box;
  background: white;
  height: 100vh;
}
.no-fans {
  position: fixed;
  width: 460px;
  height: 420px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  img {
    width: 100%;
    height: 100%;
  }
  > div {
    color: #c6c6c6;
    text-align: center;
    font-size: 22px;
  }
}
.team_top {
  width: 100%;
  height: 370px;
  background: url(/static/images/team_back.png) no-repeat center center;
  background-size: 100% 100%;
  padding-top: 30px;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2;
}
.team_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center;
  text-align: justify;
  width: 700px;
  margin: 0 auto;
}
.team_nav .go_back {
  width: 44px;
  height: 44px;
  background: url(/static/images/team_go_back.png) no-repeat center center;
  background-size: 100% 100%;
}
.team_nav .team_name {
  color: #333333;
  font-size: 32px;
  font-weight: 600;
}
.team_nav .team_search {
  width: 36px;
  height: 36px;
  background: url(/static/images/team_search.png) no-repeat center center;
  background-size: 100% 100%;
  margin-top: 4px;
}
.team_menu {
  display: flex;
  justify-content: flex-end;
  // margin-top: 24px;
}
// .team_menu .menu_num {
//   margin-right: 142px;
//   color: #191d3a;
//   font-size: 40px;
//   line-height: 68px;
//   font-weight: 600;
// }
// .team_menu .menu_invite {
//   width: 218px;
//   height: 68px;
//   line-height: 68px;
//   color: #fff;
//   font-size: 28px;
//   text-align: center;
//   border-radius: 34px 0 0 34px;
// }
.team_group {
  width: 556px;
  margin: 48px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center;
  text-align: justify;
}
.team_group .group {
  width: 278px;
  text-align: center;
  font-size: 36px;
  color: #000000;
}
.team_group .group.active {
  color: #191d3a;
  font-weight: bold;
}
.team_group .group.active .group_line {
  width: 32px;
  height: 8px;
  background: #191d3a;
  border-radius: 6px;
  margin: 0 auto;
  margin-top: 8px;
}
.team_info {
  width: 100%;
  height: 130px;
  background: #fff;
  border-radius: 80px 80px 0px 0px;
  // margin-top: 60px;
  position: absolute;
  bottom: 0;
}
.team_info .info_menu {
  width: 698px;
  height: 130px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center;
  text-align: justify;
  border-bottom: 2px solid #f2f2f2;
}
.info_menu .info_join {
  width: 192px;
  height: 60px;
  // line-height: 60px;
  border-radius: 30px;
  text-indent: 28px;
  margin-top: 36px;
  color: #191d3a;
  font-size: 28px;
  display: flex;
  align-items: center;
}
.info_menu .info_join.on {
  background: #ffe514;
  color: #333334;
}
.info_join .icons {
  // position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-left: 12px;
}
.info_join .icons .up {
  width: 12px;
  height: 12px;
  border-top: 1px solid #9b9b9b; /*no*/
  border-left: 1px solid #9b9b9b; /*no*/
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.info_join .icons .down {
  width: 12px;
  height: 12px;
  // position: absolute;
  border-bottom: 1px solid #9b9b9b; /*no*/
  border-right: 1px solid #9b9b9b; /*no*/

  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.info_join .icons .up.active {
  border-color: #333334;
}
.info_join .icons .down.active {
  border-color: #333334;
}
.team_member {
  .bottom {
    font-size: 24px;
    line-height: 80px;
    text-align: center;
    width: 100%;
  }
  .li {
    display: flex;
    align-items: center;
    width: 698px;
    height: 144px;
    margin: 0 auto;
    border-bottom: 2px solid #f2f2f2;
    justify-content: space-between;
    .member-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .member_img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        vertical-align: middle;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .member_info {
        margin-left: 20px;
        .member_name {
          font-size: 28px;
          color: #000000;
          //   padding-top: 34px;
        }
        .member_time {
          font-size: 20px;
          color: #000000;
          margin-top: 10px;
        }
      }
    }
    .team_content {
      display: flex;
      align-items: center;
      font-size: 20px;
      color: #9b9b9b;
      .team_content_go {
        width: 24px;
        height: 24px;
        // position: absolute;
        border-bottom: 1px solid #c6c6c6;
        border-right: 1px solid #c6c6c6;
        top: 60px;
        left: 100px;
        display: inline-block;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
      }
    }
  }
}
.team_exp {
  text-align: center;
  font-size: 28px;
  color: #c6c6c6;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 30px;
  bottom: 34px;
  margin: auto;
}
.container {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #989898;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.3;
  z-index: 3;
}
.container_info {
  width: 500px;
  height: 516px;
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  opacity: 1;
  z-index: 4;
  padding-top: 24px;
  border-radius: 20px;
}
.info_img {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
}
.info_img img {
  width: 100%;
  margin: 0 auto;
  border-radius: 50%;
}
.container_info .info_name {
  font-size: 28px;
  color: #000000;
  text-align: center;
  line-height: 68px;
}
.container_info .info_name img {
  width: 60px;
  height: 28px;
}
.container_info .info_invite {
  font-size: 24px;
  color: #000000;
  text-align: center;
}
.container_info .info_invite span {
  padding: 0 6px;
  color: #4a4a4a;
  border-radius: 8px;
  border: 2px solid #4a4a4a;
  margin-left: 30px;
}
.container_info .info_sum {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  justify-items: center;
  text-align: justify;
  width: 380px;
  margin: 0 auto;
  border-top: 2px solid #f2f2f2;
  margin-top: 28px;
  padding-top: 30px;
}
.info_sum .sum_wait {
  width: 190px;
  text-align: center;
}
.info_sum .sum_add {
  width: 190px;
  text-align: center;
}
.info_sum .num {
  font-size: 36px;
  color: #000000;
}
.info_sum .wait,
.info_sum .add {
  color: #333334;
  font-size: 28px;
}
.info_close {
  width: 330px;
  height: 92px;
  border-radius: 46px;
  background: #ffe514;
  line-height: 92px;
  text-align: center;
  font-size: 32px;
  color: #333334;
  margin: 0 auto;
  margin-top: 50px;
}
</style>
